<template>
  <div>
    <a-form @submit="handleSubmit" :form="form" style="width:50%;">
      <a-form-item v-bind="formItemLayout" label="安全密保问题">
        <span class="ant-form-text">{{securityQuestion}}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="安全密保答案">
        <a-input
          name="captcha"
          v-decorator="[
                      'securityAnswer',
                      {rules: [{ required: true, message: '请输入安全密保答案!' }]}
                    ]"
          placeholder="请输入安全密保答案"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="新安全密保问题">
        <div>
          <a-select
            labelInValue
            v-decorator="[
                      'problem',
                      {rules: [{ required: true, message: '请选择安全密保问题' }]}
                    ]"
            @change="handleChange"
            placeholder="请选择安全密保问题"
          >
            <a-select-option value="problem1">您配偶的姓名是？</a-select-option>
            <a-select-option value="problem2">您母亲的姓名是？</a-select-option>
            <a-select-option value="problem3">您父亲的姓名是？</a-select-option>
            <a-select-option value="problem4">您最喜欢的动物是？</a-select-option>
            <a-select-option value="problem5">您的出生地是？</a-select-option>
          </a-select>
        </div>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="安全密保答案">
        <a-input
          v-decorator="[
                      'answer',
                      {rules: [{ required: true, message: '请输入新安全密保答案' },{ validator: validateSecurityAnswer, }]}
                    ]"
          placeholder="请输入新安全密保答案"
        />
      </a-form-item>
      <div style="text-align:center;">
        <a-button style="width:100px;" htmlType="submit" type="primary">下一步</a-button>
      </div>
    </a-form>
    <a-modal title="安全密保问题重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="goindex">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import api from "@/common/api";
import { get, post } from "@/common/api";
const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      securityQuestion: "",
      securityAnswer:'',
      newSecurityAnswer:'',
      newSecurityQuestion:'',
      login: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12,offset:1 },
          md: { span: 10 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  mounted() {
    let securityQuestion = localStorage.getItem("securityQuestion");
    if (securityQuestion) {
      this.securityQuestion = securityQuestion;
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
         this.securityAnswer = values.securityAnswer;
         this.newSecurityAnswer = values.answer;
          console.log("Received values of form: ", values);
          this.ChangeSafe();
        }
      });
    },
    ChangeSafe() {
      let data = {
        securityQuestion: this.securityQuestion,
        securityAnswer: this.securityAnswer,
        newSecurityQuestion: this.newSecurityQuestion,
        newSecurityAnswer: this.newSecurityAnswer
      };
      api.ChangeSafeotp(
        data,
        res => {
          console.log("res", res);
          if (res.code == "OK") {
             this.visible = true;
          }else{
            this.$message.error(res.message);
          }
        },
        err => {}
      );
    },
    validateSecurityAnswer(rule, value, callback) {
      if (value) {
        console.log("回答", value);
        this.newSecurityAnswer = value;
      } else {
      }
      callback();
    },
    handleChange(value) {
      console.log("问题", value.label);
      this.newSecurityQuestion = value.label;
      //  console.log('this.securityQuestion',this.securityQuestion)
      // console.log(`Selected: ${value}`);
    },
    handleOk() {
      this.$router.push("/home");
    },
    goindex() {
      this.visible = false;
      this.$router.push("/userindex");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
</style>
